<!-- 新增/编辑食堂弹窗 -->
<template>
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="所属单位" prop="deptId">
        <treeselect
          v-model="form.deptId"
          :options="deptOptions"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="请选择所属单位"
        />
      </el-form-item>
      <el-form-item label="食堂名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入食堂名称" maxlength="20" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="食堂地址" prop="address">
        <el-input v-model="form.address" type="textarea" placeholder="请输入食堂地址" maxlength="100" show-word-limit clearable />
      </el-form-item>
      <el-form-item label="备注说明" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注说明" maxlength="100" show-word-limit clearable />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">发 布</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addCanteen, updateCanteen, getCanteen } from "@/api/yongcanjiaofei/yongcandidian";
import { treeselect as deptTreeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "CanteenDrawer",
  components: { Treeselect },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        id: undefined,
        name: undefined,
        address: undefined,
        status: "1",
        deptId: undefined,
        remark: undefined
      },
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "所属单位不能为空", trigger: "change" }
        ],
        name: [
          { required: true, message: "食堂名称不能为空", trigger: "blur" },
          { max: 20, message: "长度不能超过20个字符", trigger: "blur" }
        ],
        address: [
          { required: false, message: "食堂地址不能为空", trigger: "blur" },
          { max: 100, message: "长度不能超过100个字符", trigger: "blur" }
        ],
        remark: [
          { max: 100, message: "长度不能超过100个字符", trigger: "blur" }
        ]
      },
      // 部门树选项
      deptOptions: []
    };
  },
  methods: {
    // 显示弹出层
    show(row) {
      this.reset();
      if (row != null && row.id) {
        this.title = "修改用餐地点信息";
        getCanteen(row.id).then(response => {
          this.form = response.data;
          this.open = true;
        });
      } else {
        this.title = "添加用餐地点";
        this.open = true;
      }
      this.getDeptTree();
    },
    /** 获取部门树 */
    getDeptTree() {
      deptTreeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id || node.deptId,
        label: node.label || node.deptName,
        children: node.children
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        name: undefined,
        address: undefined,
        status: "1",
        deptId: undefined,
        remark: undefined
      };
      this.resetForm("form");
    },
    // 提交按钮
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateCanteen(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.$emit("refresh");
              }
            });
          } else {
            addCanteen(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("添加成功");
                this.open = false;
                this.$emit("refresh");
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style>
.vue-treeselect {

}
</style> 